<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="grade"> {{ grade }}
    <br/>
    v-if输出：
    <div v-if="grade >= 90">优</div>
    <div v-else-if="grade>=80">良</div>
    <div v-else-if="grade>=70">中</div>
    <div v-else-if="grade>=60">差</div>
    <div v-else-if="grade>0">不及格</div>
    <div v-else>请输入考试成绩</div>

    v-show输出：
    <div v-show="grade >= 90">优</div>
    <div v-show="grade >= 80 && grade < 90">良</div>
    <div v-show="grade >= 70 && grade < 80">中</div>
    <div v-show="grade >= 60 && grade < 70">差</div>
    <div v-show="grade > 0 && grade < 60">不及格</div>
    <div v-show="grade === ''">请输入考试成绩</div>

    <!-- 对比v-if 以及 v-show ,可通过审查元素获取灵感 -->
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      grade: 88
    }
  })
</script>
</html>